<template>
  <van-dropdown-item ref="close" @opened="isShow = true">
    <template #title>
      <span :class="{ filterRight: isglShow }" class="isSizeFont">{{
        title
      }}</span>
    </template>
    <template #icon>
      <i class="iconfont icon-arrow"></i>
    </template>
    <template #default>
      <van-popup
        @click-overlay="$refs.close.toggle()"
        v-model="isShow"
        position="right"
        :style="{ height: '100%', width: '80%' }"
      >
        <div class="filter-content">
          <queryHose
            :activeList="activeList"
            @addStr="addStr"
            @removeStr="removeStr"
            :houseList="houseTypeList"
            title="户型"
          ></queryHose>
          <queryHose
            :activeList="activeList"
            @addStr="addStr"
            @removeStr="removeStr"
            :houseList="houseOrientationList"
            title="朝向"
          ></queryHose>
          <queryHose
            :activeList="activeList"
            @addStr="addStr"
            @removeStr="removeStr"
            :houseList="houseFloorList"
            title="楼层"
          ></queryHose>
          <queryHose
            :activeList="activeList"
            @addStr="addStr"
            @removeStr="removeStr"
            :houseList="HouseWindowList"
            title="房屋亮点"
          ></queryHose>
        </div>
        <div class="filter-button">
          <span @click="colseBtn" class="close-btn">清除</span>
          <van-button type="primary" @click="yesFilter" class="confirm-btn">
            <span>确定</span>
          </van-button>
        </div>
      </van-popup>
    </template>
  </van-dropdown-item>
</template>

<script>
import { getConditionHouse } from '@/api'
import queryHose from '@/components/queryItem'
export default {
  name: '',
  components: {
    queryHose
  },
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 弹出层展示
      isShow: false,
      // 户型数组
      houseTypeList: [],
      // 朝向数组
      houseOrientationList: [],
      // 楼层数组
      houseFloorList: [],
      // 房屋亮点数组
      HouseWindowList: [],
      // 拼接查询条件
      more: '',
      // 高亮效果数组
      activeList: [],
      // 高亮效果是否一直显示
      isglShow: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCtiyInfoByName()
  },
  methods: {
    // 清除按钮
    colseBtn() {
      this.activeList = []
      this.more = ''
      this.yesFilter()
      this.isglShow = false
    },
    async getCtiyInfoByName() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const {
          data: { body }
        } = await getConditionHouse({
          id: this.$store.state.cityValue
        })
        this.houseTypeList = body.roomType
        this.houseOrientationList = body.oriented
        this.houseFloorList = body.floor
        this.HouseWindowList = body.characteristic

        this.$toast.clear()
      } catch (err) {
        throw err
      }
    },
    // 拼接字符串
    addStr(val) {
      this.activeList.push(val)
      // const ind = this.activeList.indexOf(i);
      // this.activeList.splice(ind, 1);
      this.more = this.activeList.join(',')
    },
    // 删除字段
    removeStr(val) {
      const ind = this.activeList.indexOf(val)
      this.activeList.splice(ind, 1)
      this.more = this.activeList.join(',')
    },
    // 确发送请求
    yesFilter() {
      if (!!this.more) {
        this.isglShow = true
      }
      this.isShow = false
      this.$emit('filter', this.more)
      this.$refs.close.toggle()
    }
  }
}
</script>

<style scoped lang="less">
.isSizeFont {
  font-size: 36px;
}
.filter-content {
  padding: 0 30px;
  min-height: 100%;
}
span.filterRight {
  color: #21b97a !important;
}
.filter-button {
  position: sticky;
  width: 100%;
  display: flex;
  z-index: 2;
  bottom: 0;
  border-top: 2px solid #e9e9e9;
  .close-btn {
    flex: 1;
    display: block;
    height: 100px;
    line-height: 100px;
    color: #07c160;
    text-align: center;
    font-size: 36px;
    background-color: #fff;
  }
  .confirm-btn {
    flex: 2;
    display: inline-block;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    span {
      font-size: 36px !important;
    }
  }
}
</style>
